<template>
  <div id="supplies">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <DataTable rowKey="deptGroupId" :btns="btns" :tableData="Data" :tableColumn="tableColumn" :pageConfig="pageConfig" @refresh="getList"></DataTable>
    </div>
    <CommonDialog
      :rows="rows"
      :form="form"
      :labelCol="{span: 6}"
      :wrapperCol="{span: 18}"
      :title="form.deptGroupId?'编辑项目组':'创建项目组'"
      :visible="formVisible"
      @hideDialog="hideFormVisible"
      @confirm="confirmHandle()"
    />
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class supplies extends Vue {
    visibleTitleType:any = '创建项目组'
    formVisible:boolean = false
  searchForm: any = {
    name: ''
  }
  get filterData () {
    return {
      name: {
        label: '项目组',
        type: 'input',
        template: {
          placeholder: '请输入项目组',
          clearable: true
        }
      }
    }
  }
  get btns () {
    return [
      {
        label: '创建项目组',
        callback: () => {
            this.formVisible = true
            this.getProjectCode()
        }

      }
    ]
  }
  get rows () {
    return {
        deptGroupCode: {
            label: '项目组编码',
            showDisabled: true,
            placeholder: '请输入项目组编码'
        },
        deptGroupName: {
            label: '项目组名称',
            placeholder: '请输入项目组名称',
            rules: [{ required: true, message: '项目组名称不能为空', trigger: 'blur' }]
        }
    }
  }
  form: any = {
    deptGroupCode: undefined,
    deptGroupName: undefined,
    deptGroupId: ''
  };
  Data: any[] = []
  tableColumn: any = {
    index: {
        label: '序号'
    },
    deptGroupCode: {
      label: '项目组编码'
    },
    deptGroupName: {
      label: '项目组名称'
    },
    createTime: {
      label: '创建时间'
    },
    creatorName: {
      label: '创建人'
    },
    action: {
      label: '操作',
      width: 200,
      template: [
        {
          tag: 'a',
          text: '编辑',
          callback: (val:any) => {
              this.showMode(val)
          }
        },
        {
          tag: 'router-link',
          text: '管理',
          query: {
            _alias: 'detail',
            deptGroupId: ''
          },
          path: '/projectManagement/projectTeam/projectTeamDetails'
        },
        {
          tag: 'a',
          text: '删除',
          confirmTxt: '是否确定删除该项目组',
          confirm: (val:any) => {
            this.deleteGroup(val)
          }
        }
      ]
    }
  }
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  }
  currentPage:any = 1
  // 关闭弹窗
  hideFormVisible () {
      this.formVisible = false
      this.form.deptGroupName = undefined
      this.form.deptGroupCode = undefined
      this.form.deptGroupId = ''
  }
  // 点击编辑
  showMode (val:any) {
        this.formVisible = true
        this.form.deptGroupName = val.deptGroupName
        this.form.deptGroupCode = val.deptGroupCode
        this.form.deptGroupId = val.deptGroupId
  }
  // 删除项目组
  deleteGroup (val:any) {
    this.$api.deptGroupDeleteGroupFetch({deptGroupId: val.deptGroupId}).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功');
        this.getList()
      }
    }).catch()
  }
  // 新增
  confirmHandle () {
    let data = {
      ...this.form
    }
    if (!this.form.deptGroupId) {
        this.$api.deptGroupAddDeprGroupFetch(data).then((res:any) => {
            if (res.code == 0) {
                this.$message.success('添加成功');
                this.hideFormVisible()
                this.getList()
            }
        }).catch()
    } else {
        this.$api.deptGroupUpdateDeprGroupFetch(data).then((res:any) => {
            if (res.code == 0) {
                this.$message.success('操作成功');
                this.hideFormVisible()
                this.getList()
            }
        }).catch()
    }
  }
  get getSearchForm () {
    return {
      name: this.searchForm.name
    }
  }
  init () {
    this.getList()
  }
  // 获取项目组编码
  getProjectCode () {
      this.$api.deptGroupGetDeptGroupSnFetch().then(res => {
          this.form.deptGroupCode = res.data
      }).catch()
  }
  getList () {
    let data = {
      ...this.getSearchForm,
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize
    }
    this.$api.deptGroupDeprGroupListFetch(data).then((res: any) => {
      res.data.records.map((item:any, index:any) => {
        item.index = this.pageConfig.pageSize * (this.pageConfig.current - 1) + (index + 1)
      })
      this.Data = res.data.records
      this.pageConfig.total = res.data.total
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current
        this.getList()
      }
    })
  }
  changePage (val: number) {
    this.pageConfig.current = val
    this.getList()
  }
}
</script>
<style lang='scss' scoped>

</style>
